<template>
  <div class="indexView">
    <component :is="mainView" :ref="mainView" style="height: calc(100% - 60px);" v-if="!show">
    </component>
    <!--  菜单区域  -->
    <div class="footer" v-if="!show">
      <div v-for='(item,index) of items' :key="index"
           :class='[item.cls,{on:index === idx}]'
           @click="change(item,index)">
        <svg-icon :icon-file-name="item.cls" :class="[{'footerIcon':index===idx}]"></svg-icon>
        <span :class="['colorChange',{on:index===idx}]">{{ item.name }}</span>
      </div>
    </div>
    <div class="account" @click="show = !show" v-if="!show">
      <svg-icon icon-file-name="account" :class="[{'footerIcon':2===idx},'accountIcon']"></svg-icon>
    </div>
    <transition name="fade">
      <component class="leftNav" v-if="show" @updateShow="updateShow" :is="accountView"></component>
    </transition>
  </div>
</template>
<script>
import detailView from "@/views/detailView/DetailView.vue"
import accountView from "@/views/accountView/AccountView.vue"
import myInfoView from "@/views/myInfoView/MyInfoView.vue"
import echartView from "@/views/echartView/EchartView.vue";
import messageView from "@/views/messageView/MessageView.vue";

export default {
  name: "indexView",
  components: {
    "detailView": detailView,
    "accountView": accountView,
    "myInfoView": myInfoView,
    "echartView": echartView,
    "messageView": messageView
  },
  data() {
    return {
      show: false,
      mainView: 'detailView',
      accountView: 'accountView',
      idx: 0,
      items: [{
        idx: 0,
        cls: "detail",
        name: "明细",
        component: "detailView",
      }, {
        idx: 1,
        cls: "echart",
        name: "图表",
        component: "echartView",
      },
        {
          idx: 2,
          cls: "",
          name: "",
          component: "",
        },
        {
          idx: 3,
          cls: "message",
          name: "消息",
          component: "messageView",
        },
        {
          idx: 4,
          cls: "myInfo",
          name: "我的",
          component: "myInfoView",
        }]
    }
  },
  created() {
    if (this.$route.params.show) {
      this.show = true;
    }
  },
  methods: {
    change(item) {
      if (item) {
        this.idx = item.idx;
        this.mainView = item.component;
      }
      this.$nextTick(() => {
        this.$forceUpdate(); // 强制更新 DOM，应用新的样式
      });
    },
    updateShow(val) {
      this.show = val;
    }
  }

}


</script>


<style scoped>
.footer {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  background: rgb(255, 255, 255);
  width: 100%;
  height: 60px;
  border-top: black;
}

.fade-enter-active {
  transition: opacity 15s ease-in-out;
}

.fade-leave-active {
  transition: opacity 1s ease-in-out;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.account {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  bottom: 0px;
}

.accountIcon {
  width: 75px !important;
  height: 75px !important;
  fill: black !important;
  margin-bottom: 10px;
}


.footer div {
  flex: 1;
  padding: 5px;
}

.footer div span {
  display: block;
  color: rgb(168, 168, 168);
}

.leftNav {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 999;
}

/*设置动画*/
.fade-enter,
.fade-leave-to {
  transform: translateY(-100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.5s;
}

.fade-enter-to {
  transform: translateY(0)
}

</style>